Advanced CSS3 and HTML5

Introduction

Web video is evolving dramatically. I recently saw some figures that indicated that about half the data moved over the Web is video. Video files are large, of course, so that doesn't mean half of all Web activity is watching videos. But just about anywhere you go online, you'll find that video is part of the experience.

One of the most radical and controversial changes associated with HTML5 is the emergence of native video, which plays in a browser without plug-in software. With native video, you don't need Flash Player, Windows Media Player, or QuickTime Player. Users no longer have to install and update different media players to watch video (or listen to audio). Instead, they can rely on browsers to seamlessly provide updated video and audio tools.

Native videos look different in different browsers. Here's a native video in Chrome:

Watching native video in Chrome

The same video displays with different controls in Firefox.

Watching native video in Firefox

No discussion of Web video can take place without acknowledging Flash Video. That technology made YouTube possible and launched the first wave of Web video. Flash Video was fast, high-quality, and played anywhere—as long as you installed the Flash Player. Today we'll explore what happened to the Flash Player plug-in and how HTML5 native video is replacing it.

An overwhelming percentage of online video watching now takes place in environments that support HTML5 video. But not all HTML5 video is the same. Different browsers support different video formats, so we'll have to account for that as we embed native HTML5 video.

Ready to embed the latest approach to video in your site? Then let's move on to Chapter 2!

The Emergence of Native Video

Much of the impetus for the adoption and spread of native video came from Apple's decision not to support the Flash plug-in and Flash Video in its mobile devices. Economics and philosophical issues played a role in that move, and I invite you to share your thoughts on that decision in the Discussion Area.

Apple's decision was the tipping point in the adoption of native video. But other developments created the foundation for that moment. It's worth reviewing the evolution of online video to understand where we are in the process and what it all means for advanced Web designers.

• Phase one: All video required proprietary player software. Windows Media files played in the Windows Media Player, and Apple's QuickTime video format played in the QuickTime Player. Windows users had a hard time accessing QuickTime video, and Mac users had difficulty playing Windows Media files. Also, both Windows Media and QuickTime files tended to be large, which discouraged distribution of longer or higher-quality video.

• Phase two: Flash emerged. Adobe's Flash Video (FLV) files required the Flash Player, but that plug-in software was available for any computer. The Flash Player looked and felt the same in any environment. Flash Video files downloaded faster than older formats because they used advanced compression software that reduced file size while maintaining quality. And the Flash Player did some of the processing that allowed video files to play, again reducing download size. On this basis, YouTube became a huge force on the Web, initially relying completely on the Flash Video format.

• Phase three: Native video develops. Other video formats began using the compression technology that made Flash Video files small and high-quality. And HTML5 included a new <video> element that browsers could support with their own, built-in, plug-in-free native video players.

Different Native Video for Different Browsers

Not all browsers support the same native video formats, and very old browsers don't support native video at all. What's the story here, and how do we address these factors when we embed native video?

Let's start with the different native video formats. You can find resources online that update you on the details of which browser supports which native video format, and I've provided information on those in the Supplementary Material. But the bottom line is this:

• All current-generation browsers except Firefox and some versions of Chrome support the h.264 video format. These files have names that end with the letters MP4.
• Firefox and Chrome support the Ogg video format. In this format, the file usually ends with OGV.
• Internet Explorer versions 8 and earlier don't support HTML5 video.

HTML5 supports a third video format: WebM. But no browser accepts only WebM video. We can provide HTML5 video that runs in any modern environment by providing just h.264 and Ogg options. So we'll do that and provide helpful and friendly advice to folks visiting our site with IE 6, 7, or 8 as to how to download a current-generation browser.

Hosted Video vs. YouTube

One option for providing access to video at your site is to embed video hosted at YouTube, Vimeo, or other video hosting services. This is an appropriate solution for beginning-level Web hosting.

If you host your videos at YouTube, there's no coding involved. You simply copy and paste code from YouTube, and the YouTube video displays within your site.

However, relying on YouTube or other video hosting sites has its problems:

• You don't control the video, the rights to the video, or how the hosting site presents it.
• The hosting site harvests your visitor data and uses it for marketing.
• Your viewers will have the chance to see and perhaps be distracted by other videos. Those can include videos about or by a competing brand, band, resource, or product.

A YouTube video embedded in a Web page

For these reasons, advanced Web designers usually host their own video. But hosting services are useful in some circumstances.

Every video hosting service allows you to generate an iFrame tag. This tag embeds content from another Web page within your page. You can think of it as a "window" into another page. The site from which you're embedding content determines the content of the iFrame element. But you define the size and location of the iFrame tag itself—the element that holds the embedded content.

Copying iFrame code to embed a YouTube video in a Web page

Where Does HTML5-Ready Video Come From?

In the next chapter, I'll walk you through embedding both versions of a video and providing help to visitors who have out-of-date browsers. But right now, I want to answer this question: Where does video come from?

If you capture video with a digital camera or recorder, it typically saves to a non-compressed format, like MOV (QuickTime) or WMV (Windows Media). If you use those formats, you need to convert them into HTML5-ready, compressed formats—Ogg or h.264. Since Ogg is a free, open-source project, you can convert video to Ogg easily. I'll provide a link in the Supplementary Material so that you can download the Theora Converter if you wish. (Theora is the name of the project that sponsors Ogg.)

On the other hand, the h.264 format is proprietary rather than open source. So tools for generating h.264 video are generally associated with commercial video-editing software. You might have gotten such software free with your digital camera or video recorder, or it might be bundled with your computer. Professional video compression tools are part of many video editing programs. For instance, Adobe Premiere, Apple Final Cut Pro, iMovie, and the current version of Windows Movie Maker all export or convert video to h.264 format.

I'm going to provide you with a couple of video files to use in the next chapter. You can download them here:

Download Files

Save these videos in the folder you've been using for all the files for our class website. (In Lesson 1, I suggested you do this in a folder on your desktop that you name "class.") Then please join me in Chapter 3.

Basic HTML5 Video Syntax

Let's go over the code you'll need if you want to embed a native HTML5 video:

<video>
  <source src="filename.mp4" type="video/mp4">
  <source src="filename.ogv" type="video/ogg">
</video>

This example defines different source files between the open and close <video> tags. It provides two options: an MP4 file that works with h.264, and an OGV file that works with Ogg.

The example that I've just shown you is the type parameter. It tells browsers the mime type—that means the video file type and details about the compression technology. Most of the time, browsers can determine that information without a type parameter, but it doesn't hurt to include it.

Generally, a type value of "video" followed by a slash and the abbreviations mp4 or ogg is sufficient. If you're interested in fine-tuning video type specs, I've provided information in the Supplementary Material.

Adding Specifications

The source parameter is the only required parameter for HTML5 video, and it may be all you need. It tells browsers what video file to present. But if you want to display controls (such as play, pause, and volume buttons and sliders), you'll need to add a parameter for that. You can also display videos at a set size using height and width parameters.

Finally, you can define autoplay, which starts a video playing as soon as a page opens. Please use this judiciously. Often users resent it when a loud audio track on a video begins playing when they open a page. They may be browsing in an environment where loud audio isn't appropriate, or they may just find it annoying to have an audio track begin playing without being told to.

Let's walk through the syntax for all of these. If you want to use any of these parameters, add them to the open <video> tag. That way they apply to both versions of the video. To display controls, add this parameter:

<video controls>

To define a width of 320 pixels and a height of 240 pixels (a common size for online videos), add this parameter:

<video width="320" height="240" controls>

And if you must add autoplay, use this parameter:

<video autoplay>

If you enable autoplay, you might consider adding the muted attribute that turns the audio track all the way down. Here's a video element with both autoplay and mute:

<video autoplay muted>

Safari, Firefox, Chrome, and Opera all support the muted parameter, but Internet Explorer 10 doesn't.

Finally, you can loop a video to play repeatedly with this parameter:

<video loop>

Of course, you can combine parameters. Here's a video element with height, width, controls, and loop:

<video width="320" height="240" controls loop>

As with all tags, you'd separate parameters with spaces and put values in quotation marks. You don't need to include values for controls, muted, autoplay, or loop; you either include them or you don't.

Current standard practice for non-HTML5 browsers is to include a line at the end of the <video> element (right before the </video> tag) with a message along the lines of: "This video requires HTML5, and your browser doesn't support that."

<video>
  <source src="filename.mp4" type="video/mp4">
  <source src="filename.ogv" type="video/ogg">
Your browser doesn't support the video tag.
</video>

Let's test all this out!

Embedding and Testing a Video

If you've downloaded the two versions of the on_record video (my first and last attempt to score big with a music video), you're ready to go. If not, please go back to Chapter 2, and download them now.

We'll create a new HTML file to play the video. We'll use the same style.css style sheet we've been working with in previous lessons. You can go back to Lesson 2 to download it if you need it. No need to worry about which version of your style sheet to use—any one will do here. We're going to be creating styles for the video, and whatever else is in your style sheet doesn't matter to us now.

With the style.css style sheet in place, open a new file in your code editor, and save it in your website folder (I've recommended that you create a folder called "class" on your desktop). Begin the file with this basic HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Video Template</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<h1>Watch Our Video!<h1>
</div>
</body>
</html>

This basic page code defines an HTML5 document, has minimalist <head> content, and wraps all the page content inside our wrapper ID div.

Now let's define the video element. If you feel confident, you can just put on your headphones, tune me out, and embed the video yourself. If you want some help, follow along with me:

1. Inside the wrapper ID, add the open and close video tags. I've highlighted them below.

<div id="wrapper">
<h1>Watch Our Video!<h1>
<video>
</video>
</div>

2. Add some basic parameters for the video. In this case, I'm going to display a controls bar and define a height and width for the video:

<video width="320" height="240" controls>

3. Add the source elements:

<video width="320" height="240" controls>
  <source src="on_record.mp4" type="video/mp4">
  <source src="on_record.ogv" type="video/ogg">
</video>

4. Provide fallback content for browsers that don't recognize the <video> tag. At a minimum, you should have a line of text explaining that users with noncompliant browsers can't see the video. A friendlier and more helpful option would include some advice about what to do—for instance, you might link to another page in your site. Or you could provide a link to a browser that installs in any system and supports HTML5. For example:

<video width="320" height="240" controls>
  <source src="on_record.mp4" type="video/mp4">
  <source src="on_record.ogv" type="video/ogg">
Your browser doesn't support the video tag. Click <a href=http://www.firefox.com>here</a> to download the Firefox browser for your operating system.
</video>

5. That's it! If possible, test your page in an Ogg-friendly browser (like Firefox, many versions of Chrome, or the mobile Android operating system) and an h.264-friendly browser (like Internet Explorer 10 or Safari).

The on_record.ogv file is right at the upper limit of file size allowed for uploading to the free version of 000webhost sites. If you have trouble uploading that file, feel free to link instead to the version of the file I uploaded to http://adv-css3-html.comule.com/on_record.ogv.

Please move on to Chapter 4, where we'll talk about how to make native video look more attractive.

Adding Posters, Styles, Preloads, and Controls

Sometimes the opening frame of a video isn't the most inviting way to display the video before a user clicks Play. One option for addressing this is to include a poster—an image file that displays in the video player when the video isn't playing.

Right-click (or, Control-click) here and choose Save Image As from the context menu to download an image file you can use as a poster for the on_record video.

Download File

To apply this file as a poster, edit the video element as shown here:

<video width="320" height="240" controls poster="on_record.png">

Here's what you'll see.

Testing a video poster

Styling the Video Element

One of the supposed benefits of native video is that browsers can define how video is presented. And, as we've seen, different browsers supply players that have different control icons.

Well, that's nice for browser makers. It helps define the look and feel of their browser. But where does that leave Web designers who want to control how videos display? Plug-in players for QuickTime and Flash Video had options for designers to customize which controls displayed and how.

The easiest way to customize the display of a video player is to define a style for the <video> element. Here's an example:

video {
width: 400px;
padding: 15px;
margin: 15px;
background-color:black;
border:2px white solid;
box-shadow: 10px 10px 5px black;
}

The result looks something like this:

Applying a CSS style to a video

Differences between standard and custom video styles

By customizing the display of the <video> tag, we've personalized how videos will look in our Web pages. We added a background that extends beyond the left and right edges of the video itself, we put a border around the video, and we added a box shadow. Even though the display of the video player itself is beyond our control, we've "framed" how it displays in our Web pages.

Preloading a Video

Video files are large. And it's a definite turn-off for visitors to click a video Play button and then twiddle their thumbs for 15 seconds while they wait. One solution is to add a preload parameter to the video tag that downloads a video when the page opens, even before a user plays the video. Here's an example:

<video width="320" height="240" controls poster="on_record.png" preload>

In some instances, auto-downloading a video slows down the opening of a page. A good rule of thumb is to use preload only when a video is the sole element or the main element on your page.

Internet Explorer 9 and 10 don't support the preload parameter, and support is spotty for mobile devices. So this option will help only some of your users.

Using JavaScript Controls

We've seen that browsers define the look of native video players. And we've customized the look and feel of native video by defining a style for the <video> tag. The remaining option is using JavaScript to create control buttons.

A full exploration of JavaScript controls for video is beyond the scope of this class, but if you find JavaScript coding inviting, I recommend our Introduction to JavaScript course.

Here we'll experiment with a simple example—creating a play/pause button. To do that, add this code after the close </video> tag:

<br>
<button onclick="playPause()">Play or pause the video</button> 
<script> 
var myVideo=document.getElementById("video"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
</script>

The first line of this code creates a line break. The second line creates the play/pause button. And the JavaScript within the <script> element defines the action associated with the button.

JavaScript almost always links to HTML through defined ID style selector. (We explored ID and class selectors in Lesson 2, Chapter 3.) In this case, we've defined our JavaScript snippet so that it applies to an ID named "video." To connect this script with our video, we need to add the video ID to our <video> tag. Here's how to do that:

<video controls poster="on_record.png" id="video">

Here's how the video looks now. You can see the JavaScript play/pause button at the bottom.

Testing a JavaScript play/pause button

It's easy to customize the text in the button; simply replace the "Play or pause the video" text inside the <button> element with other text.

We can customize the button style as well. For example, we might define a button style like this:

button {
background-color:black;
color:white;
height:40px;
border:2px white solid;
box-shadow: 10px 10px 5px black;
border-radius: 5px;
}

That would give us a button like this:

Defining a play/pause button

And we might even add a hover state to the button to provide a bit of animation, like this:

button:hover {
background-color:beige;
color:black;
height:40px;
border:2px white solid;
box-shadow: -10px -10px 5px black;
border-radius: 5px;
}

My example looks something like this when I hover my mouse over it. See the difference?

Testing a hover state for a
video play/pause button

Now You Try

I'll let you customize the colors for the button. To reinforce your sense of color scheming, apply the color scheme that you defined in Lesson 3.

In this sample solution, I added a hover state to the button to provide a bit of animation.

button:hover {
background-color:#1F1F1F;
color:black;
height:40px;
border:2px white solid;
box-shadow: -10px -10px 5px #993300;
border-radius: 5px;
}

What did you think of our survey of native video? How will you use it in your projects?

Why HTML5 Video Is the Future

How does HTML5 video fit into the wider realm of Web video? First of all, yes, there is a wider realm of Web video.

Most desktop browsing environments support Flash Player, but most sites that cater to "coveted demographics" (as they say in advertising) don't support the Flash Player plug-in. Since iPhones and iPads don't support Flash Player, and since iPad and iPhone users are disproportionately active online and buy disproportionately more stuff online, most Web designers avoid plug-ins that aren't accessible in the iOS (Apple mobile) operating system.

Also, proprietary video formats that require a plug-in are still in wide use. Not every Web designer is going to immediately pull all of his or her videos from a site to comply with HTML5 specs. Besides Flash video (FLV), proprietary video formats still in use include:

• QuickTime video (MOV)
• Windows video (WMV, AVI)
• RealMedia (RM) files

But HTML5 native video has rapidly eclipsed older formats.

What are HTML5's advantages? For designers, HTML5 video is fairly easy for us to code. It includes such features as posters, optional control display, optional autoplay, optional preloading, and optional muting. For users, it provides a seamless experience that reflects the look and feel of their browsing environment.

The main challenges with HTML5 native video are:

• No one file format is supported by all browsers.
• Designers can't do much to customize the player controls.
• Old versions of Internet Explorer don't support HTML5 video.

How do we address these challenges?

• Provide Ogg and h.264 options for every video we embed.
• Rely on CSS styling to customize the look and feel of our videos.
• Consider using a JavaScript play/pause button to add customization to our video interface.
• Provide a message and advice to users with browsers that don't support HTML5 video.

What About Mobile Users?

HTML5 plays just fine in mobile sites. All mobile browsers support HTML5, so you can play HTML5 video in those environments. You don't have any more freedom to customize HTML5 video in mobile sites than you do in full-sized sites, including sites created with jQuery Mobile. But you can safely use HTML5 video in any mobile-friendly site.

Summary

Video is an increasingly important part of Web design. Today we talked about native video—what it is, why it matters, and how you can use and customize it. Including video that loads quickly and plays easily can make just as big a difference to your site as the other techniques we've studied. After all, a site with video that takes forever to load, stalls frequently, or doesn't play at all won't get many repeat visits, no matter how attractive the custom fonts and color schemes are.

I'm devoting the next two lessons to forms. In Lesson 6, you'll find out how forms can help your site and how you can create and manage them. Whether you want to poll your visitors or gather data about them, forms are essential.

Don't forget to do the quiz and assignment and check out the Supplementary Material. Also, take a look at the FAQs—I discuss HTML5 audio there. I'll see you next time!